<template>
  <view class="wh_750 flex flex-column align-center pageHeight bg_FFFFFF">
    <s-header-title ref="headerTitle" isDisplayBack :title="page.options.name ? page.options.name : '加入亲友的家谱'"
                  is-fixed
                  background="#F8F8F8"
                  @getPageHeight="getPageHeight" zIndex="10">
    </s-header-title>
    <view :style="{height: (Number(page.headerHeight)) + 'px'}"></view>
    <view class="hW_20"></view>
<!--    <view class="joinFamily_search wh_702 hW_80">-->
<!--      <uni-search-bar v-model="page.genealogyNameValue"-->
<!--                      bgColor="#FFFFFF"-->
<!--                      placeholder="请输入亲友的家谱号"-->
<!--                      @confirm="confirm"-->
<!--      ></uni-search-bar>-->
<!--    </view>-->
    <view class="inputName flex align-center justify-between">
      <input v-model="page.genealogyNameValue" placeholder="请输入亲友的家谱号" placeholder-class="inputName_placeholder"
             :focus="familyNameFocus" @input="nameInput" confirm-type="search" @confirm="confirm"></input>
      <view class="fs_28 color_292929 fw_500"
            style="white-space: nowrap"
            @click.stop="confirm"
      >
        搜索
      </view>
    </view>
    <scroll-view class="joinFamilyTree_scrollView flex flex-column align-center" :scroll-y="true" :style="{
      height:`calc(100vh - ${page.headerHeight}px - 80rpx)`
    }">
      <view class="hW_25"></view>
      <view class="w-full flex flex-column align-center">
        <view class="familyTreeCard flex align-center justify-between" v-for="(info, index) in page.genealogicalList">
          <view class="familyTreeCard_left flex flex-column align-center">
            <view class="imageContent">
              <image class="imageContent_image" :src="`${IMG_URL}/index/familyTreeListing_icon.png`"></image>
            </view>
            <view class="add_time">
              创建时间: {{ dayjs(info.update_time * 1000).format('YYYY年MM月DD日') }}
            </view>
          </view>
          <view class="familyTreeCard_right">
            <view class="title">
              {{ info.title }}
            </view>
            <view class="content">
              发起人: {{ info.username || '暂无发起人' }}
            </view>
            <view class="content">
              家谱号: {{ info.code || '暂无家谱号' }}
            </view>
            <view class="content">
              家谱简介: {{ info.remark || '暂无简介' }}
            </view>
            <view class="hW_18"></view>
            <view class="applyFor flex justify-end">
              <view class="applyFor_text flex align-center justify-center" @click.stop="addGenealogy(info)">
                {{ info.is_add != 1 ? '申请' : '已加入' }}
              </view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
  import { computed, onMounted, reactive, ref } from 'vue';
  import HeaderTitle from '@/pages/genealogy/components/headerTitle.vue';
  import UniSearchBar from '@/uni_modules/uni-search-bar/components/uni-search-bar/uni-search-bar.vue';
  import sheep from '@/sheep';
  import dayjs from 'dayjs';

  const page = reactive({
    options: {
      name: '加入亲友的家谱',
    },
    headerHeight: 0,
    genealogyNameValue: '',
    genealogicalList: [],
  });

  const IMG_URL = computed(() => sheep.$store('AI').sq_image_path);
  const familyNameFocus = ref(false);

  onMounted(() => {
    familyNameFocus.value = true;
  });

  function getPageHeight(number) {
    page.headerHeight = number;
  }

  async function confirm(e) {
    if (!page.genealogyNameValue) {
      sheep.$helper.toast('请输入家庭号');
      return;
    }
    const { data } = await sheep.$api.genealogy.searchGenealogy({
      code: page.genealogyNameValue,
    });
    // page.seachCode = e.value;
    page.genealogicalList = data;
  }

  async function addGenealogy(info) {
    if (info.is_add != 1) {
      let { code,msg } = await sheep.$api.genealogy.applyAddGenealogyNew({
        genealogy_id: info.id
      })
      if (code === 1) {
        sheep.$helper.toast('你已申请 请等待')
        uni.$emit('getGenealogyList')
        setTimeout(() => {
          uni.navigateBack()
        }, 1500)
      } else {
        sheep.$helper.toast(msg)
      }
    }
  }
</script>


<style scoped lang="scss">
  .familyTreeCard {
    width: 702rpx;
    background: #FFFFFF;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    padding: 40rpx 15rpx;
    overflow: hidden;
  }

  .familyTreeCard_left {
    .imageContent {
      width: 290rpx;
      height: 210rpx;
      overflow: hidden;

      .imageContent_image {
        width: 290rpx;
        height: 210rpx;
      }
    }

    .add_time {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 18rpx;
      color: #4B4B4B;
    }
  }

  .familyTreeCard_right {
    .title {
      width: 390rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 34rpx;
      color: #4B4B4B;
    }

    .content {
      width: 390rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 24rpx;
      color: #4B4B4B;
    }

    .applyFor {
      width: 390rpx;
      &_text {
        width: 150rpx;
        height: 70rpx;
        background: #FF4206;
        border-radius: 36rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 28rpx;
        color: #FFFFFF;
      }
    }
  }

  .inputName {
    width: 702rpx;
    height: 80rpx;

    input {
      width: 620rpx;
      height: 80rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 28rpx;
      color: #4B4B4B;
      text-align: center;
      background: #F8F8F8;
      border-radius: 40rpx 40rpx 40rpx 40rpx;
    }
  }

  .inputName_placeholder {
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 28rpx;
    color: #9F9F9F;
    text-align: center;
  }
</style>
